import React from 'react';
import './Section.css';
class Section extends React.Component{
    constructor(){
        super()
        this.state={arr:[]}
    }
    componentDidMount(){
        var that = this;
        fetch("http://www.myhm.xyz/food.php?page=1").then(function(res){
            res.json().then(function(res){
                console.log(res)
                that.setState({
                    arr:res.result.list
                })
            })
        })
    }
    getIndex(type){
        alert(type)
    }
    render(){
        var arr=this.state.arr
        // var arr=[1,2,3,4,51111]
        // var arr1=[];
        // for(var i=0;i<arr.length;i++){
        //     arr1.push(<li>{arr[i]}</li>)
        // }
        // arr1=arr.map(function(key,index){
        //     return <li key={index}>{key}</li>
// })   
        var result=arr.map((item,index)=>{
            return <div onClick={this.getIndex.bind(this,index)} className="Img" key={index}>
                <img key={index} src={item.thumb}></img>
                <div>{item.title}</div>
                <div>{item.maxprice}￥</div>
            </div>
        })
        return(
            // <div>我是中部</div>
            <div>
                <ul>
                <li>{result}</li>
            </ul>
            </div>
        )
    }
}
export default Section;